<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
</head>

<!-- 

-->

<div id="app">
<h1>{{count}}</h1>
<button @click="add()">按钮</button>
<button @click="add1()">按钮</button>


</div>
<body>
    <script>
        const vm = new Vue({
          el: '#app',
          data : {
              count:0,
          },
          methods: {
            add(){
                console.log(this)
                console.log(vm);
                console.log(this==vm);
               
                this.count++
                // vm.count++
            },
            //箭头函数中没有this，箭头函数中的this是从父级作用域当中继承过来的
            //对于当前的程序来说，父级作用域是全局作用域，也就是window
            add1:()=>{
                console.log(this);
                
            }
          },
        })
    </script>

    
</body>
</html>